<template>
  <div class="dataTreeContainer">
    <div class="tree_title">
      <span>地图目录</span>
    </div>
    <div class="layer_close" @click="doCloseHoverPopup"></div>
    <div class="menuselect" v-if="addDialogVisible">
      <el-tree
        :data="treedata"
        :props="defaultProps"
        show-checkbox
        ref="tree"
        node-key="id"
        default-expand-all
        highlight-current
        :check-on-click-node="true"
        @check="getCurrentNode"
      ></el-tree>
    </div>
  </div>
  <!-- 2,3,4,5,6,7,9,10,11,12,13,14 -->
  <!-- @check-change="handleCheckChange" -->
</template>

<script>
import Bus from "@/js/EventBus";
export default {
  name: "LayerPopup",

  data() {
    return {
      checkList: [],
      selectShow: false,
      isCheck: true,
      addDialogVisible: false,
      treedata: [
        {
          label: "物联监测",
          id: 1,
          children: [],
        },

        {
          label: "管线图层",
          id: 8,
          children: [],
        },

        {
          label: "基础图层",
          id: 0,
          children: [],
        },
        // {
        //   label: "管线流向",
        //   layername: "ANDINGQU:gxlxlayer",
        //   id: 15,

        // }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {},
  computed: {
    modeType() {
      return window.sessionStorage.getItem("path");
    },
  },
  watch: {
    modeType(newVal, oldVal) {
      if (newVal !== oldVal) {
        // this.getCheckListData();
      }
    },
  },
  beforeDestroy() {
    Bus.$off("layer"); // 移除事件监听器
  },
  mounted() {
    let that = this;
    // Bus.$on("btntype", (e) => {
    //   that.getCheckListData();
    // });
    Bus.$on("initlayers", (e) => {
      this.addDialogVisible = true;
      that.getCheckListData();
    });
    Bus.$on("xiaohui", (e) => {
      // this.viewer.destroy();
      this.addDialogVisible = false;
      // this.treedata = [
      //   {
      //     label: "物联监测",
      //     id: 1,
      //     children: [],
      //   },

      //   {
      //     label: "管线图层",
      //     id: 8,
      //     children: [],
      //   },

      //   {
      //     label: "基础图层",
      //     id: 0,
      //     children: [],
      //   },
      // ];
    });
  },

  methods: {
    getCheckListData() {
      this.treedata = [
        {
          label: "物联监测",
          id: 1,
          children: [],
        },

        {
          label: "管线图层",
          id: 8,
          children: [],
        },

        {
          label: "基础图层",
          id: 0,
          children: [],
        },
      ];
      let checkList = [];
      checkList = this.Thematiclayer;
      let showdata = [];
      checkList.forEach((element) => {
        // console.log(element);
        if (element.type == "point") {
          // console.log(element)

          this.treedata[0].children.push(element);
        } else if (element.type == "line") {
          this.treedata[1].children.push(element);
        } else {
          this.treedata[2].children.push(element);
        }
        if (element.show == true) {
          showdata.push(element.id);
        }
      });
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(showdata, true);
      });

      // this.$refs.tree.setCheckedKeys(showdata, true);
      // console.log(this.checkList, "  this.checkList")
    },

    openthis() {
      this.selectShow = !this.selectShow;
    },
    handleCheckChange(data, checked, indeterminate) {
      // console.log("data, checked, indeterminate", data, checked, indeterminate);
      this.Thematiclayer.forEach((e) => {
        if (e.id == data.id) {
          e.show = checked;
        }
      });
      let datas = [data, checked];
      // setTimeout(() => {
      Bus.$emit("layer", datas);
      // }, 100 );

      // console.log(this.Thematiclayer, "this.Thematiclayer")
    },

    doCloseHoverPopup() {
      this.$parent.doSetIsShowPopup();
    },

    getCurrentNode(nodeObj, nodeState) {
      //判断当前状态是选中还是取消选中
      const isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1;
      // console.log("isCheck,nodeObj", isCheck, nodeObj);
      if (nodeObj.hasOwnProperty("children")) {
        // console.log("1111");

        nodeObj.children.forEach((element) => {
          this.Thematiclayer.forEach((e) => {
            if (e.id == element.id) {
              e.show = isCheck;
            }
          });
          let datas = [element, isCheck];
          Bus.$emit("layer", datas);
        });
      } else {
        // console.log("2222");
        this.Thematiclayer.forEach((e) => {
          if (e.id == nodeObj.id) {
            e.show = isCheck;
          }
        });
        let datas = [nodeObj, isCheck];
        Bus.$emit("layer", datas);
      }
      // this.Thematiclayer.forEach((e) => {
      //   if (e.id == nodeObj.id) {
      //     e.show = isCheck;
      //   }
      // });
      // let datas = [nodeObj, isCheck];
      // Bus.$emit("layer", datas);
    },
  },
};
</script>

<style lang="scss" scoped>
.dataTreeContainer {
  z-index: 999;
  // width: 301px;
  // color: #ffffff;
  // background: url("@/assets/panelTree/dtml_bg.png") no-repeat;
  // background-size: 100% 100%;
  position: relative;
  top: 0px;
  // margin-top: -10px;
}

.tree_title {
  width: 280px;
  height: 35px;
  box-sizing: border-box;
  background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;

  background-size: 90% 100%;
  text-align: left;
  padding-left: 50px;
  line-height: 40px;
  // background-color: red;
  margin: 10px 0 0 10px;
}

.tree_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #c8e9ff;
}

.layer_close {
  width: 14px;
  height: 15px;
  background: url("@/assets/poipopup/poi_popup_close.png");
  position: relative;
  top: -26px;
  left: 240px;
  cursor: pointer;
}

.menuselect {
  width: 90%;
  height: 100%;
  color: #ffffff;
  text-align: center;
  // font-family: FZCHSJW--GB1-0;
  letter-spacing: 2px;
  padding: 0 10px 10px 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.el-tree {
  background: transparent;
  color: white;
  height: calc(100% - 100px);
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
}

// 选择小方块
::v-deep .el-checkbox__inner {
  background-color: transparent;
  border: solid 1px #c9e9ff;
  width: 12px;
  height: 12px;
}

// 鼠标悬浮
::v-deep .el-tree-node__content:hover,
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(24, 247, 248, 0);
}

::v-deep .el-tree-node__content {
  margin-bottom: 0px;
  height: 26px;
}

// 箭头
::v-deep .el-tree-node__expand-icon {
  color: #b9ddf5;
  font-size: 15px;
  pointer-events: none;
  /* background: url(../../../../assets/image/frame/triangle_icon.png) no-repeat; */
}

::v-deep .el-tree-node__expand-icon.is-leaf {
  color: transparent;
  cursor: default;
  background: none;
}

::v-deep .el-checkbox__inner::after {
  height: 6px;
  top: 0;
  left: 2px;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  height: 4px;
  top: 3px;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: transparent;
  border-color: #c9e9ff;
}

::v-deep > .el-tree-node__expand-icon {
  padding-bottom: 8px;
}
</style>
